<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <title>个人中心</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style type="text/css">
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        .container {
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
            margin: 20px auto;
            max-width: 100%;
        }
        h1 {
            text-align: center;
            font-size: 36px;
            margin-bottom: 20px;
        }
        .profile {
            display: flex;
            align-items: center;
            margin-bottom: 30px;
        }
        .profile img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-right: 20px;
        }
        .profile h2 {
            font-size: 28px;
            margin: 0;
        }
        .profile p {
            font-size: 18px;
            margin: 0;
        }
        .profile .fa {
            font-size: 24px;
            margin-right: 10px;
        }
        .info {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .info-item {
            width: 48%;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f5f5f5;
            border-radius: 5px;
        }
        .info-item h3 {
            font-size: 24px;
            margin: 0 0 10px;
        }
        .info-item p {
            font-size: 18px;
            margin: 0;
        }
        .btn {
            display: inline-block;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            font-size: 18px;
            margin-right: 10px;
            transition: background-color 0.3s ease;
        }
        .btn:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
<div class="container" >
    <div class="profile">
        <input type="hidden" th:value="${shop.getShopId()}" id="shopId1">
        <img th:src="@{${shop.getShopImage()}}" alt="头像">
        <div>
            <h2>[[${shop.getShopName()}]]</h2>
            <p>经营类型：[[${shop.getShopTypeName()}]]</p>
        </div>
        <a href="#" style="float: right;margin-left: 65%;" class="btn" data-target="#updateImageModal" id="touxiang" data-toggle="modal">更换头像</a>

    </div>
    <div class="info">
        <div class="info-item">
            <h3>店铺信息</h3>
            <p>餐厅电话：[[${shop.getShopPhone()}]]</p>
            <p>餐厅地址：[[${shop.getShopAddress()}]]</p>
            <p>门店公告：[[${shop.getAnnouncement()}]]</p>
            <p>营业时间：[[${shop.getShopTime()}]]</p>
            <p>营业执照编码：[[${shop.getLicense()}]]</p>

            <a href="#" class="btn" data-target="#updateShopModal" id="update" data-toggle="modal">编辑</a>
        </div>
        <div class="info-item">
            <h3>账户余额</h3>
            <p>当前余额：[[${shop.getShopMoney()}]]元</p>
            <a href="#" class="btn">明细</a>
            <a href="#" class="btn">提现</a>
        </div>
        <div class="info-item">
            <h3>账号安全</h3>
            <p>登录账号：[[${shop.getShopUser()}]]</p>
            <p>登录密码：********</p>
            <a href="#" class="btn">修改密码</a>
        </div>
        <div class="info-item">
            <h3>我的订单</h3>
            <p>待付款：<a href="#">2个</a></p>
            <p>待出餐：<a href="#">1个</a></p>
            <p>待收货：<a href="#">3个</a></p>
            <a href="#" class="btn">查看订单</a>
        </div>
    </div>
</div>
<div class="modal fade" id="updateShopModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >编辑个人信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body form-group">
                <form id="updateform" enctype="multipart/form-data">
                    <div class="form-group">
                        <label for="shopName" class="control-label start label-text ">店铺名称:</label>
                        <input type="text" class="form-control " name="shopName" maxlength="20" placeholder="请输入店铺名称" id="shopName" readonly>
                        <label for="shopTypeId1" class="control-label start">店铺分类:</label><br>
                        <select class="select" name="shopTypeId1" id="shopTypeId1" disabled>
                            <option th:each="type:${shopType}" th:value="${type.shopTypeId}" th:if="${shop.parentTypeId==type.shopTypeId}">[[${type.shopTypeName}]]</option>
                        </select>
                        <select class="select" name="shopTypeId1" id="shopTypeId2" disabled>
                            <option th:each="type:${shopType}" th:value="${type.shopTypeId}" th:if="${shop.shopTypeId==type.shopTypeId}">[[${type.shopTypeName}]]</option>
                        </select><br>
                        <label for="announcement" class="control-label">店铺描述:</label>
                        <input type="text" class="form-control" name="announcement" maxlength="20" placeholder="描述" id="announcement" >
                        <label for="shopAddress" class="control-label start">店铺地址:</label>
                        <input type="text" class="form-control" name="shopAddress" maxlength="20" placeholder="请输入商品价格" id="shopAddress" readonly>
                        <label for="name">联系人姓名：</label>
                        <input type="text" class="form-control" id="name" name="name"><br>
                        <label for="shopPhone" class="control-label">联系电话:</label>
                        <input type="text" class="form-control" name="shopPhone" maxlength="20" placeholder="描述" id="shopPhone" >
                        <label for="license" class="control-label">营业执照编码:</label>
                        <input type="text" class="form-control" name="license" maxlength="20" placeholder="描述" id="license" readonly>
                        <label for="shopTime1" class="control-label">营业时间:</label>
                        <div id="shopTime1">
                            <select name="hours" id="startTime">
                                <option value="00:00">00:00</option>
                                <option value="01:00">01:00</option>
                                <option value="02:00">02:00</option>
                                <option value="03:00">03:00</option>
                                <option value="04:00">04:00</option>
                                <option value="05:00">05:00</option>
                                <option value="06:00">06:00</option>
                                <option value="07:00">07:00</option>
                                <option value="08:00">08:00</option>
                                <option value="09:00">09:00</option>
                                <option value="10:00">10:00</option>
                                <option value="11:00">11:00</option>
                                <option value="12:00">12:00</option>
                                <option value="13:00">13:00</option>
                                <option value="14:00">14:00</option>
                                <option value="15:00">15:00</option>
                                <option value="16:00">16:00</option>
                                <option value="17:00">17:00</option>
                                <option value="18:00">18:00</option>
                                <option value="19:00">19:00</option>
                                <option value="20:00">20:00</option>
                                <option value="21:00">21:00</option>
                                <option value="22:00">22:00</option>
                                <option value="23:00">23:00</option>
                            </select>
                            <select name="hours" id="endTime">
                                <option value="00:00">00:00</option>
                                <option value="01:00">01:00</option>
                                <option value="02:00">02:00</option>
                                <option value="03:00">03:00</option>
                                <option value="04:00">04:00</option>
                                <option value="05:00">05:00</option>
                                <option value="06:00">06:00</option>
                                <option value="07:00">07:00</option>
                                <option value="08:00">08:00</option>
                                <option value="09:00">09:00</option>
                                <option value="10:00">10:00</option>
                                <option value="11:00">11:00</option>
                                <option value="12:00">12:00</option>
                                <option value="13:00">13:00</option>
                                <option value="14:00">14:00</option>
                                <option value="15:00">15:00</option>
                                <option value="16:00">16:00</option>
                                <option value="17:00">17:00</option>
                                <option value="18:00">18:00</option>
                                <option value="19:00">19:00</option>
                                <option value="20:00">20:00</option>
                                <option value="21:00">21:00</option>
                                <option value="22:00">22:00</option>
                                <option value="23:00">23:00</option>
                            </select>
                        </div>
                        <label for="price" class="control-label start">起送价格:</label>
                        <input type="text" class="form-control" name="price" maxlength="20" placeholder="请输入商品价格" id="price" >
                        <label for="deliveryPrice" class="control-label start">配送费:</label>
                        <input type="text" class="form-control" name="deliveryPrice" maxlength="20" placeholder="原材料" id="deliveryPrice" >
                        <input type="hidden" id="shopId" name="shopId" th:value="${shop.getShopId()}" >
                        <input type="hidden" name="shopTime" id="shopTime">
                        <input type="hidden" name="shopTypeId" id="shopTypeId">
                        <input type="hidden" name="parentTypeId" id="parentTypeId">
                        <input type="hidden" name="shopTypeName" id="shopTypeName">
                        <span id="typedishemsg1" class="msg"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-primary" id="updateDishe">确定</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="updateImageModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="post" id="imageform">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">更换头像</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <input type="file"  placeholder="请选择文件..."  class="form-control"  name="file" maxlength="20" id="image">
                <img style="width: 100px;height: 100px;display: inline-block;"  id="selectedImage">
                <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        var flag=false;
        $("#image").on("change", function() {
            $("#selectedImage").css("display","inline-block")
            const fileInput = $("#image")[0];
            const selectedImage = $("#selectedImage")[0];
            const file = fileInput.files[0];
            const reader = new FileReader();
            reader.onload = function(event) {
                selectedImage.src = event.target.result;
            };
            reader.readAsDataURL(file);
        });
        $("#selectedImage").attr("src","[[${shop.getShopImage()}]]")
        $("#update").on("click",function () {
                    $("#announcement").val("[[${shop.getAnnouncement()}]]")
                    $("#deliveryPrice").val("[[${shop.getDeliveryPrice()}]]")
                    $("#price").val("[[${shop.getPrice()}]]")
                    $("#shopAddress").val("[[${shop.getShopAddress()}]]")
                    $("#shopName").val("[[${shop.getShopName()}]]")
                    $("#shopPhone").val("[[${shop.getShopPhone()}]]")
                    $("#ShopTypeId").val("[[${shop.getShopTypeId()}]]")
                    $("#name").val("[[${shop.getName()}]]")
                    $("#license").val("[[${shop.getLicense()}]]")
                    var time_range = "[[${shop.getShopTime()}]]";
                    var [start_time, end_time] = time_range.split("-");
                    start_time = start_time.trim();
                    end_time = end_time.trim();
                    $("#startTime").val(start_time)
                    $("#endTime").val(end_time)
                    // 4. 在模态框中展示查询结果
        })
        $("#updateform").submit(function(){
            var shopTime=$("#startTime").val()+"-"+$("#endTime").val()
            var shopTypeName = $('#shopTypeId1 option:selected').text()+"-"+$('#shopTypeId2 option:selected').text();
            $("#parentTypeId").val($("#shopTypeId1").val())
            $("#shopTypeId").val($("#shopTypeId2").val())
            $("#shopTypeName").val(shopTypeName)
            $("#shopTime").val(shopTime)
            //
            $.ajax({
                type: "post",
                url: "[[@{/updateShop}]]",
                data: $("#updateform").serialize(),
                success: function (result) {
                    if (result > 0) {
                        alert("修改成功");
                        window.location.href = "[[@{/user(shopId=${shopId})}]]";
                    } else {
                        alert("修改失败！");
                        return false;
                    }
                },
                error: function (result) {
                    alert("error"+result);
                }
            })
            return false;
        })
        $("#imageform").submit(function(){
            var formData=new FormData()
            var img;
            if ($("#image").val()!==''){
                img="shop/[[${shop.getShopName()}]]/"+$("#image").val().substring($("#image").val().lastIndexOf('\\')+1)
                formData.append('file', $("#image")[0].files[0]);
                formData.append('shopImage',img);
                formData.append('shopId',"[[${shopId}]]");
                flag=true
            }else {
                alert("请选择文件")
            }
            if (flag){
                $.ajax({
                    type: "post",
                    url: "[[@{/updateShopImg}]]",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        if (result > 0) {
                            alert("修改头像成功");
                            window.location.href = "[[@{/user(shopId=${shopId})}]]";
                        } else {
                            alert("修改头像失败！");
                            return false;
                        }
                    },
                    error: function (result) {
                        alert("error"+result);
                    }
                })
            }
            return false;
        })
    })
</script>

